<template>
  <div ref="searchContainer" class="tools-library">
    <div class="page-header">
      <div class="header-icon">
        <img src="@/assets/vue.svg" alt="工具宝库" />
      </div>
      <div class="header-title">工具宝库</div>
    </div>

    <div class="search-container">
      <a-input-search
        v-model:value="searchValue"
        placeholder="搜索工具..."
        enter-button
        @search="onSearch"
      />
    </div>

    <div class="tools-section">
      <h2 class="section-title">推荐工具</h2>
      <div class="tools-grid">
        <div v-for="tool in recommendedTools" :key="tool.id" class="tool-card">
          <div class="tool-icon">
            <img :src="tool.icon" :alt="tool.name" />
          </div>
          <div class="tool-info">
            <h3 class="tool-name">{{ tool.name }}</h3>
            <p class="tool-desc">{{ tool.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="tools-section">
      <h2 class="section-title">AI智能助手</h2>
      <div class="assistant-banner">
        <div class="banner-content">
          <h3>一键启动高效助手，图像和代码任务轻松完成</h3>
          <a-button type="primary">立即体验</a-button>
        </div>
      </div>
    </div>

    <div class="tools-section">
      <h2 class="section-title">效率提升工具包</h2>
      <div class="toolkit-banner">
        <div class="banner-content">
          <h3>专业办公必备的AI工具集合</h3>
          <a-button>免费使用</a-button>
        </div>
      </div>
    </div>

    <div class="tools-section">
      <h2 class="section-title">最新上线</h2>
      <div class="tools-grid">
        <div v-for="tool in newTools" :key="tool.id" class="tool-card new-tool">
          <div class="tool-icon">
            <img :src="tool.icon" :alt="tool.name" />
          </div>
          <div class="tool-info">
            <h3 class="tool-name">{{ tool.name }}</h3>
            <p class="tool-desc">{{ tool.description }}</p>
          </div>
          <div class="tool-tag">新品</div>
        </div>
      </div>
    </div>

    <div class="tools-section">
      <h2 class="section-title">热门分类</h2>
      <div class="tools-grid">
        <div v-for="category in popularCategories" :key="category.id" class="category-card">
          <div class="category-icon">
            <img :src="category.icon" :alt="category.name" />
          </div>
          <div class="category-info">
            <h3 class="category-name">{{ category.name }}</h3>
            <p class="category-desc">{{ category.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const searchValue = ref('')

const dom = useTemplateRef<HTMLDivElement>('searchContainer')

onMounted(() => {
  console.log(dom.value, 'dom.value')
})
const onSearch = (value: string) => {
  console.log('搜索:', value)
}

// 模拟数据
const recommendedTools = ref([
  {
    id: 1,
    name: '超级AI',
    description: '手性绘画创作的AI助手',
    icon: 'https://via.placeholder.com/50'
  },
  {
    id: 2,
    name: '即时AI',
    description: '文生图的AI助手，效果惊艳',
    icon: 'https://via.placeholder.com/50'
  },
  {
    id: 3,
    name: '灵感写手',
    description: '智能、高效写作的AI助手',
    icon: 'https://via.placeholder.com/50'
  },
  {
    id: 4,
    name: '智能设计师',
    description: 'AI辅助设计UI平台',
    icon: 'https://via.placeholder.com/50'
  }
])

// 这部分数据可以保留，传递给 NewTools 组件
const newTools = ref([
  {
    id: 1,
    name: 'Opera Neon',
    description: 'Opera浏览器Web Agent助手',
    icon: 'https://via.placeholder.com/50'
  },
  {
    id: 2,
    name: '投影客',
    description: 'PPT AI中心，可将思维导图转PPT',
    icon: 'https://via.placeholder.com/50'
  },
  {
    id: 3,
    name: '涂鸦Airy',
    description: 'ABC Mouse，即时绘画，内容丰富',
    icon: 'https://via.placeholder.com/50'
  },
  {
    id: 4,
    name: '魔法AI',
    description: '专注于一个全能的AI助手工具',
    icon: 'https://via.placeholder.com/50'
  }
])

const popularCategories = ref([
  {
    id: 1,
    name: '创意写作',
    description: 'AI小说和各种写作的AI工具',
    icon: 'https://via.placeholder.com/50'
  },
  {
    id: 2,
    name: '讯飞文书',
    description: '即时语音工具，5分钟生成一篇文章',
    icon: 'https://via.placeholder.com/50'
  },
  {
    id: 3,
    name: '灵感写手',
    description: '智能、高效写作的AI助手工具',
    icon: 'https://via.placeholder.com/50'
  }
])
</script>

<style lang="less" scoped>
.tools-library {
  padding: 20px;

  .page-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;

    .header-icon {
      width: 40px;
      height: 40px;
      margin-right: 12px;
      background-color: #1890ff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 24px;
        height: 24px;
      }
    }

    .header-title {
      font-size: 24px;
      font-weight: bold;
    }
  }

  .search-container {
    margin-bottom: 24px;
    max-width: 600px;
  }

  .category-tabs {
    margin-bottom: 24px;
  }

  .tools-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 16px;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: #1890ff;
        border-radius: 2px;
      }
    }

    .tools-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 16px;
    }

    .tool-card {
      display: flex;
      padding: 16px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      position: relative;

      .tool-icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
        border-radius: 8px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .tool-info {
        flex: 1;

        .tool-name {
          font-size: 16px;
          font-weight: bold;
          margin: 0 0 4px;
        }

        .tool-desc {
          font-size: 12px;
          color: #666;
          margin: 0;
        }
      }

      &.new-tool {
        .tool-tag {
          position: absolute;
          top: 0;
          right: 0;
          background-color: #ff4d4f;
          color: #fff;
          font-size: 12px;
          padding: 2px 6px;
          border-radius: 0 8px 0 8px;
        }
      }
    }

    .category-card {
      display: flex;
      padding: 16px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

      .category-icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
        border-radius: 8px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .category-info {
        flex: 1;

        .category-name {
          font-size: 16px;
          font-weight: bold;
          margin: 0 0 4px;
        }

        .category-desc {
          font-size: 12px;
          color: #666;
          margin: 0;
        }
      }
    }

    .assistant-banner,
    .toolkit-banner {
      background-color: #e6f7ff;
      border-radius: 8px;
      padding: 20px;

      .banner-content {
        h3 {
          font-size: 16px;
          margin: 0 0 12px;
        }
      }
    }

    .toolkit-banner {
      background-color: #f6ffed;
    }
  }
}
</style>
